<template>
  <div>
    <PageTemplate>
      <div slot="content">
        <PageEditCollapse :is-search="false" :default-collapse="true">
          <div slot="title" class="page-edit-colllapse-title">
            <div style="width: 200px;">{{$t('cm.baseinfo')}}</div>
          </div>
          <div>
            <!-- 表单 -->
            <el-form
              :model="meeting"
              label-position="right"
              label-width="150px"
              class="page-edit-colllapse-form"
              :rules="rules"
              ref="meeting"
            >
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="$t('she.meeting_trial')" prop="trial">
                    <el-input v-model="meeting.trial"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('she.meeting_teamName')" prop="teamName">
                    <el-input v-model="meeting.teamName"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="会议时间" prop="tempTimes">
                    <el-date-picker
                      style="width: 80%"
                      v-model="meeting.tempTimes"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      :picker-options="pickerOptions">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('she.meeting_meetingUserName')" prop="meetingUsers">
                    <!-- <el-input v-model="meetingUsers.participantName">
                        <el-button slot="append" icon="el-icon-search" @click="selectMeetingUser"></el-button>
                    </el-input> -->
                    <PersonSelect id="participantName" :value="meetingUsers" v-bind:multiple="true" ></PersonSelect>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="12">
                  <el-form-item :label="$t('she.meeting_meetingStartTime')" prop="meetingStartTime">
                    <el-date-picker v-model="meeting.meetingStartTime" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('she.meeting_meetingEndTime')" prop="meetingEndTime">
                    <el-date-picker v-model="meeting.meetingEndTime" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                  </el-form-item>
                </el-col> -->
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="$t('she.meeting_leadingUserName')" prop="leadingUserName">
                    <!-- <el-input v-model="meeting.leadingUserName"></el-input> -->
                    <PersonSelect id="leadingUserName"  :value="meeting.leadingUserName" v-bind:multiple="false"  ></PersonSelect>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('she.meeting_teamSafetyUserName')" prop="teamSafetyUserName">
                    <!-- <el-input v-model="meeting.teamSafetyUserName"></el-input> -->
                    <PersonSelect id="teamSafetyUserName" :value="meeting.teamSafetyUserName" v-bind:multiple="false"  ></PersonSelect>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="$t('she.meeting_sms_notice')" prop="smsNotice">
                    <el-radio v-model="meeting.smsNotice" :label="1">是</el-radio>
                    <el-radio v-model="meeting.smsNotice" :label="0">否</el-radio>
                  </el-form-item>
                </el-col>

              </el-row>
            </el-form>
          </div>
        </PageEditCollapse>
        <PageEditCollapse :is-search="false" :default-collapse="true">
          <div slot="title" class="page-edit-colllapse-title">
            <div style="width: 200px;">文档及其他</div>
          </div>
          <div>
            <FileUploadMeeting
              name="uploadDocsFile"
              @uploadSuccess="meetingUploadSuccess"
              :meetingInfoId="meeting.id"
              :meetingFileList="fileList"
              :reset="fileReset"
              @uploadRemove="meetingUploadRemove"
            >
            </FileUploadMeeting>
          </div>
        </PageEditCollapse>
        <el-row class="row-empty-10"></el-row>
        <el-row>
          <el-button type="primary" @click="submitForm('meeting')">{{$t('cm.commit')}}</el-button>
          <el-button type="primary" @click="toList">{{$t('cm.return')}}</el-button>
        </el-row>
      </div>
    </PageTemplate>
  </div>
</template>

<script>
import { ALERT } from '@/utils/responseHandle'
import * as Constant from '@/utils/constant'
import PageTemplate from '@/components/common/PageTemplate'
import PageEditCollapse from '@/components/common/PageEditCollapse'
import FileUploadMeeting from '@/components/common/FileUploadMeeting'
import HasBtn from '@/mixins/HasBtn'
import { mapState } from 'vuex'
import { COMMON } from '@/utils/commonUtil'
import {dateFtt} from '@/utils/datetime'
import api_she from '@/api/api_she'
import PersonSelect from '@/components/asc/PersonSelect'
const vailLeadingUserName=(rule,value,callback)=>{
  if(document.getElementById("leadingUserName").value) {
    callback();
  }else{
    callback(new Error("必填项"));
  }
};
const vailTeamSafetyUserName=(rule,value,callback)=>{
  if(document.getElementById("teamSafetyUserName").value) {
    callback();
  }else{
    callback(new Error("必填项"));
  }
};
const vailMeetingUsers=(rule,value,callback)=>{
    if(document.getElementById("participantName").value) {
        callback();
    }else{
        callback(new Error("必填项"));
    }
};
let now = `${dateFtt('yyyy-MM-dd', new Date())} 00:00:00`
export default {
  components: {
    PageTemplate, PageEditCollapse, PersonSelect, FileUploadMeeting
  },
  data () {
    return {
      meeting: {
        id: null,
        trial: null,
        teamName: null,
        meetingStartTime: null,
        meetingEndTime: null,
        leadingUser: 11,
        leadingUserName: null,
        teamSafetyUser: 11,
        teamSafetyUserName: null,
        smsNotice: null,
        meetingType: 1,
        hseMeetingFileList: [],
        tempTimes: null,
        hseMeetingUserList: []
      },
      meetingUsers:'',
      rules: {
        trial: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        teamName: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        tempTimes: [
          { required: true, message: '必选项', trigger: 'blur' }
        ],
        // meetingStartTime: [
        //   { required: true, message: '必填项', trigger: 'blur' }
        // ],
        // meetingEndTime: [
        //   { required: true, message: '必填项', trigger: 'blur' }
        // ],
        leadingUserName: [
          { required: true, validator: vailLeadingUserName, trigger: 'blur' }
        ],
        teamSafetyUserName: [
          { required: true, validator: vailTeamSafetyUserName, trigger: 'blur' }
        ],
        meetingUsers: [
            { required: true, validator: vailMeetingUsers, trigger: 'blur' }
        ],
        smsNotice: [
          { required: true, message: '必填项', trigger: 'blur' }
        ]
      },
      fileList: [],
      fileReset: false,
      pickerOptions: { // 时间限制
        disabledDate: time => {
          let s = time.getTime()
          let e = new Date(now).getTime()
          return s < e
        }
      }
    }
  },
  created () {
    if (!COMMON.isNullOrUndefined(this.$router.history.current.params.id) && this.$router.history.current.params.id !== Constant.NEW_PARAMS) {
      this.sheMeetingGet(this.$router.history.current.params.id)
    }
  },
  methods: {
    sheMeetingGet (id) {
      api_she.sheMeetingGet({ id }, result => {
        if (result.code === Constant.RT_SUCCESS) {
          this.meeting = {
            ...result.data,
            tempTimes: [result.data.meetingStartTime, result.data.meetingEndTime]
          }
          if (result.data.hseMeetingUserList && result.data.hseMeetingUserList.length > 0) {
            let meetingUsers = ''
            for (let i = 0; i<result.data.hseMeetingUserList.length; i++) {
              if (i === 0) {
                meetingUsers = result.data.hseMeetingUserList[i].meetingUserName
              } else {
                meetingUsers = `${meetingUsers}, ${result.data.hseMeetingUserList[i].meetingUserName}`
              }
            }
            this.meetingUsers = meetingUsers
          }
          this.fileReset = result.data.hseMeetingFileList && result.data.hseMeetingFileList.length > 0
          this.fileList = result.data.hseMeetingFileList.map(item => {
            return {
              name: item.fileName,
              url: item.fileWebPath,
              scpCommonFileUploadId: item.scpCommonFileUploadId,
              meetingFileType: item.meetingFileType
            }
          })
        } else {
          // _this.$t('cm.tips')
          ALERT.error(result.msg)
        }
      })
    },
    submitForm (formName) {
      let hseMeetingUserStr = document.getElementById("participantName").value
      let temps = []
      let hseMeetingUserList = []
      if (hseMeetingUserStr) {
        temps = hseMeetingUserStr.split(',')
        for (let i = 0; i<temps.length; i++) {
          hseMeetingUserList.push({
            meetingUser: temps[i].substr(1,temps[i].indexOf(']')-1),
            meetingUserName: temps[i]
          })
        }
      }
      this.$refs[formName].validate((valid, error) => {
        if (valid) {
          this.meeting.leadingUserName = document.getElementById("leadingUserName").value;
          this.meeting.leadingUser = document.getElementById("leadingUserName").value.substr(1,this.meeting.leadingUserName.indexOf(']')-1);
          this.meeting.teamSafetyUserName = document.getElementById("teamSafetyUserName").value;
          this.meeting.teamSafetyUser = document.getElementById("teamSafetyUserName").value.substr(1,this.meeting.teamSafetyUserName.indexOf(']')-1);
          this.meeting.hseMeetingUserList = hseMeetingUserList
          if (this.meeting.tempTimes && this.meeting.tempTimes.length === 2) {
            this.meeting.meetingStartTime = this.meeting.tempTimes[0]
            this.meeting.meetingEndTime = this.meeting.tempTimes[1]
          }
          this.meeting.hseMeetingFileList = this.fileList.map(item => {
            return {
              id: this.meeting.id,
              ...item
            }
          })
          this.meeting.hseCheckOptionsConfigTreeList = null
          let d = [this.meeting];
          api_she.sheMeetingSave(d, result => {
            if (result.code === Constant.RT_SUCCESS) {
              ALERT.success(result.msg)
              this.toList()
            } else {
              // _this.$t('cm.tips')
              ALERT.error(result.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    toList () {
      COMMON.routerTo(Constant.ROUTE_SHE_MEETING.index, this.$router)
    },
    selectMeetingUser() {},
    meetingUploadSuccess (v) {
      this.fileList.push(v)
      // this.meeting.hseMeetingFileList.push(v)
    },
    meetingUploadRemove (v) {
      this.fileList = v
    }
  },
  mounted () {
  },
  computed: {
  }
}
</script>

<style lang="scss">
</style>
